<!--
* description: 技术援助单回复详情
* author:沈赛
* createdDate:2021-1-28
-->
<template>
  <section class="editBigAreaInfo">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :title="textMap[popupsState]"
      :append-to-body="true"
      :visible.sync="curPopupsVisible"
      width="70%"
      @close="closeEdit"
      @opened="open"
    >
      <dialogHeader
        slot="title"
        :title="textMap[popupsState]"
        :style-type="$store.state.app.dialogType"
      />

      <div class="filter-container filter-title">基本信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents1.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :disabled="true"
            :is-require="comp.isRequire"
            :span="comp.span || 6"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :options="comp.options"
            :o-fields="comp.oFields"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">故障信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents2.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :is-require="comp.isRequire"
            :span="comp.span || 6"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :options="comp.options"
            :o-fields="comp.oFields"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">其他信息</div>
      <div class="filter-container filter-params huifu">
        <div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="附件" name="first">
              <one-table-template
                ref="multipleTable"
                :dynamic-table-cols="tableCols"
                :dynamic-buttons="tableButtons"
                :dynamic-is-show-select="false"
                :dynamic-is-show-more-btn="true"
                :dynamic-table-defult-height="300"
                :is-show-pagination="false"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <div class="filter-container filter-title fanhuixinxi">
        反馈/回复信息
      </div>
      <div class="filter-container filter-params">
        <component
          :is="comp.component"
          v-for="comp in tableComponents3.filter(o => o.isMust === true)"
          :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
          :key="comp.compKey"
          :validrule="comp.validrule"
          :code-field="comp.codeField"
          :text-field="comp.textField"
          :popups-key="comp.compKey"
          :parent-fileds="comp.parentFileds || ''"
          :code="formField[comp.codeField]"
          :disabled="comp.disabled"
          :is-require="comp.isRequire"
          :span="comp.span || 6"
          :label-name="comp.labelName"
          :lookuptype="comp.lookuptype"
          :options="comp.options"
          :o-fields="comp.oFields"
          @changeCode="getComponentCode"
        />
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'

export default {
  components: {
    dialogHeader: () => import('@/components/dialogHeader'),
    mixButton: () => import('@/components/basicComponent/mixButton'),
    OneTableTemplate
  },

  // 组件混入对象
  mixins: [formMixins],

  props: {
    popupsVisible: { type: Boolean, default: false },
    // 从网格传入的编辑行数据(json)
    dynamicEditRowData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },

  data() {
    return {
      // 动态组件-按钮
      tableButtons: [
        // {
        //   compKey: "btnKey1",
        //   type: "primary",
        //   size: "small",
        //   icon: "iconfont  icon-preservation",
        //   clickEvent: () => this.save(),
        //   text: "批量下载" /* 保存*/,
        //   position: "right"
        // }
      ],

      // 动态组件-查询条件
      tableComponents1:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents1 &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents1.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents1
          : [
            {
              compKey: 'compKey20',
              labelName: '申请编号：',
              codeField: 'applyCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey21',
              labelName: '申请日期：',
              codeField: 'applyDate',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isRequire: true,
              isMust: true,
              disabled: true
            },
            {
              compKey: 'compKey22',
              labelName: '类型：',
              codeField: 'type',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey23',
              labelName: '紧急度：',
              codeField: 'urgency',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey24',
              labelName: '门店编码：',
              codeField: 'dlrCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey25',
              labelName: '门店名称：',
              codeField: 'dlrShortName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey26',
              labelName: '省/市：',
              codeField: 'provinceName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            //   {
            //     compKey: "compKey3",
            //     labelName: "申请状态：",
            //     codeField: "",
            //     component: () => import("@/components/org/commonInput"),
            //     type: "inputText",
            //     isMust: true,
            //     isMul: false
            //   },
            {
              compKey: 'compKey27',
              labelName: 'VIN码：',
              codeField: 'vin',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isRequire: true,
              isMust: true
            },
            {
              compKey: 'compKey28',
              labelName: '车系名称：',
              codeField: 'carSeriesCn',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isRequire: true,
              isMust: true
            },
            {
              compKey: 'compKey29',
              labelName: '车型编码：',
              codeField: 'carConfigCode',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey30',
              labelName: '车型名称：',
              codeField: 'carConfigCn',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey31',
              labelName: '生产日期：',
              codeField: 'produceDate',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey32',
              labelName: '销售日期：',
              codeField: 'saleDate',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey33',
              labelName: '行驶里程：',
              codeField: 'mileage',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey34',
              labelName: '前电机号：',
              codeField: 'engineCode',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey35',
              labelName: '后电机号：',
              codeField: 'engineCode2',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey36',
              labelName: '电池包编号：',
              codeField: 'batteryCode',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey37',
              labelName: '减速器号：',
              codeField: '',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey38',
              labelName: '增程器号：',
              codeField: '',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey39',
              labelName: '车主姓名：',
              codeField: 'netCustName',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey40',
              labelName: '车主电话：',
              codeField: 'netPhone',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey41',
              labelName: '送修人：',
              codeField: 'sendName',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey42',
              labelName: '送修人电话：',
              codeField: 'sendMobile',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey43',
              labelName: '车主地址：',
              codeField: 'ownerAdd',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true,
              span: 24
            }
          ],

      // 动态组件-查询条件
      tableComponents2:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents2 &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents2.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents2
          : [
            {
              compKey: 'compKey44',
              labelName: '主题：',
              codeField: 'faultTopic',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true,
              isRequire: true,
              span: 24
            },
            {
              compKey: 'compKey45',
              labelName: '故障现象：',
              codeField: 'csCtName',
              component: () => import('@/components/org/commonInput'),
              type: 'datePicker',
              disabled: true,
              isRequire: true,
              isMust: true
            },
            {
              compKey: 'compKey46',
              labelName: '故障编码：',
              codeField: 'faultCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true
            },
            {
              compKey: 'compKey47',
              labelName: '故障系统：',
              codeField: 'faultSystem',
              component: () => import('@/components/org/commonSelect'),
              type: 'inputText',
              isRequire: true,
              isMust: true,
              disabled: true
            },
            {
              compKey: 'compKey48',
              labelName: '故障日期：',
              codeField: 'faultDate',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isRequire: true,
              isMust: true
            },
            {
              compKey: 'compKey49',
              labelName: '主故障件名称：',
              codeField: 'faultPartName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isRequire: true,
              isMust: true
            },
            {
              compKey: 'compKey50',
              labelName: '主故障件号：',
              codeField: 'mainPartCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isMust: true
            },
            {
              compKey: 'compKey51',
              labelName: '申报人：',
              codeField: 'apply',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isRequire: true,
              isMust: true
            },
            {
              compKey: 'compKey52',
              labelName: '申报人电话：',
              codeField: 'applyMobile',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              isRequire: true,
              isMust: true
            },
            {
              compKey: 'compKey53',
              labelName: '故障描述：',
              codeField: 'faultDesc',
              component: () =>
                import('@/components/org/commonInput/textareaInput'),
              type: 'dropdownList',
              disabled: true,
              isMust: true,
              span: 24
            },
            {
              compKey: 'compKey54',
              labelName: '诊断过程：',
              codeField: 'diagnostic',
              component: () =>
                import('@/components/org/commonInput/textareaInput'),
              type: 'dropdownList',
              disabled: true,
              isMust: true,
              span: 24
            },
            {
              compKey: 'compKey55',
              labelName: '故障原因：',
              codeField: 'faultReson',
              component: () =>
                import('@/components/org/commonInput/textareaInput'),
              type: 'dropdownList',
              disabled: true,
              isMust: true,
              span: 24
            },
            {
              compKey: 'compKey56',
              labelName: '维修方案：',
              codeField: 'repairMethod',
              component: () =>
                import('@/components/org/commonInput/textareaInput'),
              type: 'dropdownList',
              disabled: true,
              isMust: true,
              span: 24
            }
          ],

      // 动态组件-查询条件
      tableComponents3:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents3 &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents3.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents3
          : [
            {
              compKey: 'compKey57',
              labelName: '回复人姓名：',
              codeField: 'replyName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 6,
              disabled: true
            },
            {
              compKey: 'compKey58',
              labelName: '回复人时间：',
              codeField: 'replyDate',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 6,
              disabled: true
            },
            {
              compKey: 'compKey59',
              labelName: '校正故障系统：',
              codeField: 'realFaultSystem',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 6,
              disabled: true
            },
            {
              compKey: 'compKey60',
              labelName: '回复信息：',
              codeField: 'repleyRemark',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 24,
              disabled: true
            }
          ],

      // 标题
      textMap: {
        // edit: "技术援助单回复详情",
        look: '技术援助单回复详情',
        look1: '技术援助单申请详情'
      },

      // // 表单数据（无需赋值，由混入对象赋值）
      // formField: this.$utils.getFormField(
      //   this,
      //   {
      //     bigAreaId: ""
      //   },
      //   this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      // ),

      activeName: 'first',
      activeName1: 'first',

      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'controlBtn',
              label: '操作',
              codeField: 'controlBtn',
              width: 100,
              align: 'center',
              fixed: true,
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey1',
                  align: 'center',
                  labelName: '下载',
                  component: () => import('@/components/org/linkButton'),
                  clickEvent: index => this.fileDownload(index)
                }
              ]
            },
            {
              prop: 'fileName',
              label: '附件名称',
              align: 'center'
            },
            {
              prop: 'fileSite',
              label: '附件地址',
              align: 'center',
              hidden: true
            }
          ],

      formField: {},

      // apiConfig2: api.queryExhibitionCarProductionByDetail,
      // 动态组件-按钮

      formField2: {}
    }
  },

  methods: {
    // 下载附件
    fileDownload(index) {
      // if(this.$refs['multipleTable'].list[index].fileSite){
      //   this.$utils.FileDownload([this.$refs['multipleTable'].list[index].fileSite])
      // }
      let host = null
      const hostname = location.hostname
      const port = location.port
      const item = this.$refs['multipleTable'].list[index]
      // console.log(item)
      if (!port) {
        host = `https://${hostname}`
      } else {
        host = `http://${hostname}:${port}`
      }
      if (item.isPeer === '1') {
        const splitIndex = item.fileSite.indexOf(':') + 1
        const url = item.fileSite.slice(splitIndex)
        window.open(url)
      } else {
        window.open(`${host}${item.fileSite}`)
      }
    },
    closeEdit() {
      this.$emit('close')
      this.curPopupsVisible = false
    },
    open() {
      const queryObj = {
        type: 'mutation',
        apiConfig: {
          ServiceCode: 'findAnswerDetail',
          APIUrl:
            '/mp/e3sh/aftersale/TechnicalAssistanceSheetService/findAnswerDetail.do'
        },
        variables: {
          appleyId: this.dynamicEditRowData.appleyId
        }
      }
      var paramD = this.$getParams(queryObj)
      this.$requestAPI(paramD).then(response => {
        this.formField = response.rows[0]
        this.formField.replyName = response.rows[0].replyName
        this.formField.replyDate = response.rows[0].replyDate
        this.formField.realFaultSystem = response.rows[0].realFaultSystem
        this.formField.repleyRemark = response.rows[0].repleyRemark
        this.$refs.multipleTable.list = response.rows[0].fujianInfo
        // this.$refs.multipleTable1.list = response.rows[0].partList
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.promptSpan {
  position: absolute;
  bottom: 26px;
  right: 335px;
  color: #e70020;
}
.filter-title {
  font-size: 18px;
  font-weight: bolder;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}
.prompt {
  color: #e70020;
  font-size: 13px;
  height: 15px;
  line-height: 15px;
}

/deep/.filter-params .el-col {
  margin-bottom: 15px;
}
/deep/.filter-container .el-textarea__inner {
  height: 70px;
}
.huifu {
  position: relative;
  left: 0;
  top: 0;
}
// .aa {
// 	position: absolute;
// 	right: 23px;
// 	top: 47px;
// 	width: 68px;
// 	height: 27px;
// 	border-radius: 2px;
// 	font-size: 12px;
// 	border: none;
// }
.bb {
  // 	position: absolute;
  // 	right: 23px;
  // 	top: 47px;
  // 	width: 68px;
  // 	height: 27px;
  // 	border-radius: 2px;
  // 	font-size: 12px;
  // 	border: none;
  // padding-right: 10px;
}
.fanhuixinxi {
  margin-top: 15px;
}
.cc {
  margin: 10px 10px 10px 0;
}
</style>
